import { Button, Table, Col, Form, Row } from "antd";
import React, { FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import MyTitle from "../../components/Title";
import { xueyuanList } from "../../utils";
import { Radio, Divider } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const data: DataType[] = [
  {
    key: "1",
    name: "陈灏",
    age: 25,
    address: "武汉市江夏区藏龙岛118号",
  },
  {
    key: "2",
    name: "陈俊峰",
    age: 23,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "3",
    name: "小虎",
    age: 32,
    address: "香港东区铜锣湾18号",
  },
  {
    key: "4",
    name: "小龙",
    age: 99,
    address: "香港尖沙咀26号",
  },
  {
    key: "5",
    name: "陈灏",
    age: 25,
    address: "砵兰街116号",
  },
  {
    key: "6",
    name: "陈俊峰",
    age: 23,
    address: "香港新界",
  },
  {
    key: "7",
    name: "小虎",
    age: 32,
    address: "旺角码头",
  },
  {
    key: "8",
    name: "小龙",
    age: 99,
    address: "砵兰街116号",
  },
  {
    key: "9",
    name: "陈灏",
    age: 25,
    address: "砵兰街116号",
  },
  {
    key: "10",
    name: "陈俊峰",
    age: 23,
    address: "清水湾",
  },
  {
    key: "11",
    name: "小虎",
    age: 32,
    address: "",
  },
  {
    key: "12",
    name: "小龙",
    age: 99,
    address: "香港尖沙咀26号",
  },
  {
    key: "13",
    name: "陈灏",
    age: 25,
    address: "香港尖沙咀26号",
  },
  {
    key: "14",
    name: "陈俊峰",
    age: 23,
    address: "London No. 1 Lake Park",
  },
  {
    key: "15",
    name: "小虎",
    age: 32,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "16",
    name: "小龙",
    age: 99,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "17",
    name: "陈灏",
    age: 25,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "18",
    name: "陈俊峰",
    age: 23,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "19",
    name: "小虎",
    age: 32,
    address: "香港东区筲箕湾18号",
  },
  {
    key: "20",
    name: "小龙",
    age: 99,
    address: "香港东区筲箕湾18号",
  },
];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};
const BanjiDetile: FC<any> = () => {
  const [selectionType, setSelectionType] = useState<"checkbox" | "radio">(
    "checkbox"
  );
  const navigate = useNavigate();
  return (
    <div>
      {/* <Button onClick={() => navigate(-1)} danger>
        返回上一级
      </Button>
      <MyTitle text="班级详情" />
      <Row>
        <Col>
          <Form.Item
            name="title"
            label="学院名称"
            rules={[{ required: true, message: "请输入正确班级名称" }]}
          ></Form.Item>
        </Col>
      </Row> */}
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="checkbox">Checkbox</Radio>
        <Radio value="radio">radio</Radio>
      </Radio.Group>

      <Divider />

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
};

export default BanjiDetile;
